<template>
  <div class="header-wrap">
    <div class="left">
      <div class="back" @click="back">
        <SvgIcon icon-class="ic_返回" />
        <span>返回</span>
      </div>
    </div>
    <div class="right">
      <el-button type="primary" @click="back"> 关闭查看 </el-button>
      <el-button type="primary" @click="recover"> 恢复此版本 </el-button>
    </div>
  </div>
  <div class="cesium-wrap">
    <Cesium v-if="sceneStore.sceneDetail" />
  </div>
</template>

<script setup lang="ts">
import { useSceneStore } from '@/store/scene';
import { useRoute, useRouter } from 'vue-router';
import Cesium from './cesium.vue';
import { clearModelReadyMap, clearLayerMap, clearLayerClickCallbackMap } from '@/service';
import { layerRequestInsMap } from '@/service/effect';
import { useRequest } from '@jl/common/composable';
import { getSceneDetail, getSceneConfigList, updateScene } from '@/api/scene';
import { confirmAgain } from '@/utils';

defineOptions({
  name: 'SceneVersion',
});

const sceneStore = useSceneStore();
const route = useRoute();
const router = useRouter();
let sceneId = '';
let configId = '';

const { run: basicDetailRun, data: basicDetailData } = useRequest<any, API.Scene.Scene | null>(
  getSceneDetail,
  null
);
const { run: configRun, data: configData } = useRequest<any, API.Scene.IVersion[]>(
  getSceneConfigList,
  []
);

onMounted(async () => {
  sceneId = route.params.id as string;
  configId = route.params.configid as string;
  if (!sceneId || !configId) return;
  await basicDetailRun({ params: { activityId: sceneId } });
  await configRun({ params: { activityId: sceneId } });
  let configJson = null;
  configData.value.forEach((item: any) => {
    if (item.conifgId === configId) {
      configJson = item.configJson;
    }
  });
  if (!configJson) return;
  sceneStore.sceneDetail = { ...basicDetailData.value, configJson };
});

onBeforeUnmount(() => {
  sceneStore.layerList = [];
  sceneStore.onlineMapSels = [];
  sceneStore.isCimupComplete = false;
  sceneStore.leftPanelActive = '';
  sceneStore.preview = false;
  sceneStore.leftPanelVisible = false;
  sceneStore.mapPanelVisible = false;
  sceneStore.sceneDetail = null;
  sceneStore.mapCameraHeight = 100000;
  clearModelReadyMap();
  clearLayerMap();
  clearLayerClickCallbackMap();
  sceneStore.selLayer = null;
  sceneStore.specialEffectVisible = false;
  [...layerRequestInsMap.keys()].forEach((layerName) => {
    const ins: any = layerRequestInsMap.get(layerName);
    ins.destroy();
    layerRequestInsMap.delete(layerName);
  });
});

function back() {
  router.go(-1);
}

async function recover() {
  const result = await confirmAgain('确定恢复此版本？', '确定恢复此版本？操作后将按照此版本展示。');
  if (!result || !sceneStore.sceneDetail) return;
  const fData = new FormData();
  fData.set('activityId', sceneStore.sceneDetail.activityId);
  fData.set('activityName', sceneStore.sceneDetail.activityName);
  fData.set('projectId', sceneStore.sceneDetail.projectId || '');
  fData.set('actViewAngle', sceneStore.sceneDetail.actViewAngle || '');
  fData.set('actDesp', sceneStore.sceneDetail.actDesp || '');
  fData.set('actCover', sceneStore.sceneDetail.actCover || '');
  fData.set('conifgId', configId);
  const param = {
    data: fData,
  };
  updateScene(param).then(() => {
    router.push({ path: `/scene/detail/${sceneId}` });
  });
}
</script>

<style lang="less" scoped>
.header-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 60px;
  background: #1d1e1f;
  border-bottom: 2px solid #000000;
  pointer-events: initial;
  padding: 0 20px 0 0;
  color: #fff;
  .left {
    display: flex;
    align-items: center;
    width: 30%;
    .back {
      display: flex;
      align-items: center;
      white-space: nowrap;
      margin-right: 24px;
      cursor: pointer;
      .svg-icon {
        margin-left: 12px;
        margin-right: 4px;
        font-size: 20px;
      }
    }
  }
  .right {
    margin-left: auto;
    .el-button {
      & + .el-button {
        margin-left: 10px;
      }
    }
  }
}
.cesium-wrap {
  height: calc(100vh - 60px);
}
</style>
